﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
	<div id="mainHolder" onmouseover="replaceBG('centerbgblur.png')" onmouseout="replaceBG('centerbg.jpg')"
		style="margin-top: 30px; height: 400px; background-image: url('../../Content/Images/centerbg.jpg');
		background-position: top left; background-repeat: no-repeat;">
		<div style="position: relative; width: 500px; float: left; display: inline; height: 280px;
			text-align: left; color: Green; font-size: 24px;">
			<span style="margin-top: 60px; padding-left: 20px; display: inline-block">Welcome To:
			</span>
			<span style="padding-left: 20px; display: inline-block">Habito construction chemicals
				experts. </span>
		</div>
		<div id="Descholder" style="position: relative; top: 0px; width: 460px; display: inline;
			float: left; height: 280px">
			<ul id="Products" style="list-style: none; padding-left: 30px; text-align: left;
				font-size: 14pt; color: Green; padding-top: 45px;">
				<li>Concrete Admixtures</li>
				<li>Concrete Repairing Agents</li>
				<li>Technology Transmitting For Concrete Admixtures</li>
			</ul>
		</div>
		<div style="position: relative; top: 0px; width: 100%; display: inline; float: left;
			text-align: left; height: 113px;">
			<img alt="123" src="../../Content/Images/centerbg.jpg" style="border: 2px solid Gray;
				height: 80px;" width="150px;  " onmouseover="ShowDetail('123')" onmouseout="ShowOrigion()" />
			<img alt="123" src="../../Content/Images/centerbg.jpg" style="border: 2px solid Gray;
				height: 80px;" width="150px; " onmouseover="ShowDetail('456')" onmouseout="ShowOrigion()" />
			<img alt="123" src="../../Content/Images/centerbg.jpg" style="border: 2px solid Gray;
				height: 80px;" width="150px; " onmouseover="ShowDetail('789')" onmouseout="ShowOrigion()" />
			<img alt="123" src="../../Content/Images/centerbg.jpg" style="border: 2px solid Gray;
				height: 80px;" width="150px;  " onmouseover="ShowDetail('110')" onmouseout="ShowOrigion()" />
		</div>
	</div>
	<div style="margin-top: 30px;">
		<div class="indexHolder">
			<div style="width: 100%; padding-left: 10px; text-align: left; font-size: 10pt; color: #006FA1">
				Latest News</div>
			<div>
				<ul style="list-style: none; text-align: left; font-size: 9pt; color: Green;">
					<li>New1</li>
					<li>New1</li>
					<li>New1</li>
					<li>New1</li>
				</ul>
			</div>
		</div>
		<div class="indexHolder">
			<div style="width: 100%; padding-left: 10px; text-align: left; font-size: 10pt; color: #006FA1">
				New Products</div>
			<div>
				<ul style="list-style: none; text-align: left; font-size: 9pt; color: Green;">
					<li>Products 123</li>
					<li>Products 123</li>
					<li>Products 123</li>
					<li>Products 123</li>
				</ul>
			</div>
		</div>
		<div class="indexHolder">
			<div style="width: 100%; padding-left: 10px; text-align: left; font-size: 10pt; color: #006FA1">
				New Solutions</div>
			<div>
				<ul style="list-style: none; text-align: left; font-size: 9pt; color: Green;">
					<li>Solutions 456</li>
					<li>Solutions 456</li>
					<li>Solutions 456</li>
					<li>Solutions 456</li>
				</ul>
			</div>
		</div>
	</div>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
	<style type="text/css">
		#Products li { display: block; height: 40px; padding-left: 30px; line-height: 30px; background-image: url('../../Content/Images/homeLiBg.png'); background-position: left top; background-repeat: no-repeat; }
	</style>
	<script type="text/javascript">
		var origionContent = "";
		$(document).ready(function () {
			origionContent = $("#Descholder").html();
		});
		function ShowDetail(desc) {
			var html = "<span style='padding-top:20px; padding-left:30px; text-align:left;line-hight:25px; display:block; font-size:9pt; color:Green;'>" +
			"-PolyCarboxylate Acid Superplasticizer  (PCE)							<br/>	" +
			"-Sodium Salt of β-Naphthalene Sulphoante Formaldehyde   (SNF/PNS/NSF)	<br/>	" +
			"-Aminosulphonic-based Superpalsticizer (AS)							<br/>	" +
			"-Sulphonate Melamine Formaldehyde Condensate  (SMF)					<br/>	" +
			"-Sulphonate Acetone Formaldehyde Resin  (SAF)							<br/>	" +
			"-Sodium Lignosulphonate (SLS)											<br/>	" +
			"-Calcium Lignosulphonate (CLS)											<br/>	" +
			"-Sodium Gluconate (SG)													<br/>	" +
			"</span>";
			$("#Descholder").html(html);
		}
		function ShowOrigion() {
			$("#Descholder").html(origionContent);
		}
		function replaceBG(img) {
			//$("#mainHolder").css("background-image", "url('../../Content/Images/" + img + "')");
		}
	</script>
</asp:Content>
